import { WeaInputSearch, WeaLocaleProvider } from 'ecCom';
import classNames from 'classnames';
const { getLabel } = WeaLocaleProvider;
export default class CusCodeFunctions extends React.Component {
    state = {
        openKeys: ['base', 'field', 'task'],
        selectedkey: '',
        functions: [],
        filterFunction: [],
        filterValue: undefined
    }
    componentDidMount() {
        this.setState({
            functions: [{
                label: getLabel('511701', '基础'),
                key: 'base',
                items: [{
                    key: 'excel-getActiveSheet',
                    name: 'excel.getActiveSheet()',
                    desc: getLabel('511702', '使用此方法可以获取到当前激活的Sheet页对象')
                }, {
                    key: 'excel-getSheets',
                    name: 'excel.getSheets()',
                    desc: getLabel('511703', '使用此方法可以获取到所有的Sheet页对象')
                }, {
                    key: 'excel-getSheetFromName',
                    name: 'excel.getSheetFromName()',
                    desc: getLabel('511704', '使用此方法可以根据Sheet页名称获取Sheet页对象')
                }, {
                    key: 'excel-getDetailTable',
                    name: 'excel.getDetailTable()',
                    desc: getLabel('511705', '使用此方法可以获取到明细表的Table对象')
                }, {
                    key: 'excel-bind',
                    name: 'excel.bind()',
                    desc: getLabel('511706', '使用此方法可以绑定事件到表格控件')
                }, {
                    key: 'excel-initCheckValue',
                    name: 'excel.initCheckValue()',
                    desc: getLabel('527836','此方法在导入数据后执行，如果需要导入数据后执行某些操作，可以在此方法中加逻辑') 
                }, {
                    key: 'excel-afterUploadData',
                    name: 'excel.afterUploadData()',
                    desc: getLabel('527837','此方法在导入数据后执行，用于禁止字段赋值') ,
                }]
            }, {
                label: getLabel('511716', '字段'),
                key: 'field',
                items: [{
                    key: 'excel-getFieldValue',
                    name: 'excel.getFieldValue()',
                    desc: getLabel('511717', '使用此方法可以获取字段的值')
                }, {
                    key: 'excel-setFieldValue',
                    name: 'excel.setFieldValue()',
                    desc: getLabel('511718', '使用此方法可以设置字段的值')
                }, {
                    key: 'excel-convertFieldNameToId',
                    name: 'excel.convertFieldNameToId()',
                    desc: getLabel('527839','使用此方法可以根据字段名称获取字段id') 
                }, {
                    key: 'excel-changeFieldAttr',
                    name: 'excel.changeFieldAttr()',
                    desc: getLabel('527840','使用此方法可以改变单个字段显示属性(只读、可编辑、必填)') 
                }, {
                    key: 'excel-addDetailRow',
                    name: 'excel.addDetailRow()',
                    desc: getLabel('527841','使用此方法可以添加明细及设置初始值') 
                }, {
                    key: 'excel-delDetailRow',
                    name: 'excel.delDetailRow()',
                    desc: getLabel('527842','使用此方法可以删除明细表指定行/全部行') 
                }, {
                    key: 'excel-getDetailRowKey',
                    name: 'excel.getDetailRowKey()',
                    desc: getLabel('527843','使用此方法可以获取明细已有行的数据库主键') 
                }, {
                    key: 'excel-getFieldIndex',
                    name: 'excel.getFieldIndex()',
                    desc: getLabel('527844','使用此方法可以获取字段的行列坐标索引') 
                }, {
                    key: 'excel-getDetailRowCount',
                    name: 'excel.getDetailRowCount()',
                    desc: getLabel('527845','使用此方法可以获取明细总行数')
                }, {
                    key: 'excel-appendBrowserDataUrlParam',
                    name: 'excel.appendBrowserDataUrlParam()',
                    desc: getLabel('527846','使用此方法可以扩展浏览按钮取数接口参数值') 
                }, {
                    key: 'excel-getBrowserShowName',
                    name: 'excel.getBrowserShowName()',
                    desc: getLabel('527847','使用此方法可以获取浏览按钮的显示值') 
                }, {
                    key: 'excel-removeSelectOption',
                    name: 'excel.removeSelectOption()',
                    desc: getLabel('527848','使用此方法可以移除选择框字段选项') 
                }, {
                    key: 'excel-controlSelectOption',
                    name: 'excel.controlSelectOption()',
                    desc: getLabel('527849','使用此方法可以控制选择框字段选项')
                }, {
                    key: 'excel-getSelectShowName',
                    name: 'excel.getSelectShowName()',
                    desc: getLabel('527850','使用此方法可以获取选择框字段的显示值') 
                }, {
                    key: 'excel-getFieldInfo',
                    name: 'excel.getFieldInfo()',
                    desc: getLabel('527851','使用此方法可以获取字段信息') 
                }, {
                    key: 'excel-getFieldCurViewAttr',
                    name: 'excel.getFieldCurViewAttr()',
                    desc: getLabel('527852','使用此方法可以获取字段当前的只读、可编辑、必填属性')
                }, {
                    key: 'excel-controlDateRange',
                    name: 'excel.controlDateRange()',
                    desc: getLabel('527853','使用此方法可以控制日期浏览按钮的可选日期范围')
                }]
            }, {
                label: getLabel('527417','填报任务'),
                key: 'task',
                items: [{
                    key: 'excel-hideInsertSpanRow',
                    name: 'excel.hideInsertSpanRow()',
                    desc: getLabel('527854','使用此方法可以隐藏填报页面右键菜单中的插入合并行选项') 
                }, {
                    key: 'excel-hideInsertTopRow',
                    name: 'excel.hideInsertTopRow()',
                    desc: getLabel('527855','使用此方法可以隐藏填报页面右键菜单中的在上方插入表行选项')
                }, {
                    key: 'excel-hideInsertBottomRow',
                    name: 'excel.hideInsertBottomRow()',
                    desc: getLabel('527856','使用此方法可以隐藏填报页面右键菜单中的在下方插入表行选项')
                }, {
                    key: 'excel-hideDeleteRow',
                    name: 'excel.hideDeleteRow()',
                    desc: getLabel('527857','使用此方法可以隐藏填报页面右键菜单中的删除表行选项')
                }, {
                    key: 'excel-hideEdcTaskViewBtn',
                    name: 'excel.hideEdcTaskViewBtn()',
                    desc: getLabel('527858','使用此方法可以隐藏填报页面中的相关按钮')
                }, {
                    key: 'excel-triggleEdcTaskViewBtn',
                    name: 'excel.triggleEdcTaskViewBtn()',
                    desc: getLabel('527859','使用此方法可以触发填报页面中的相关按钮事件') 
                }]
            }]
        })
    }
    onSearch = (value) => {
        if (value) {
            const v = (value || '').toLowerCase();
            this.setState({
                filterFunction: this.state.functions.map(d => ({ ...d, items: d.items.filter(e => e.desc.toLowerCase().indexOf(v) > -1 || e.name.toLowerCase().indexOf(v) > -1) })).filter(d => d.items.length > 0),
                filterValue: value
            })
        } else {
            this.setState({
                filterFunction: [],
                filterValue: undefined
            })
        }

    }
    render() {
        const { openKeys, selectedkey, functions, filterFunction, filterValue } = this.state;
        const realFunctions = filterValue ? filterFunction : functions;
        return (
            <div className="edc-excel-code-functions">
                <div style={{ fontSize: '18px', margin: '16px' }}>API</div>
                <div className="search">
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@a17y1j`} onChange={this.onSearch} placeholder={getLabel('511719', '请输入函数名称或者描述')}></WeaInputSearch>
                </div>
                <div className="functions">
                    {realFunctions.map(funcs => {
                        const open = openKeys.indexOf(funcs.key) > -1;
                        return [<p onClick={() => this.toggleOpen(funcs.key)}><i className={open ? 'icon-edc-common-folder-open' : 'icon-edc-common-folder'}></i>{funcs.label}</p>,
                        <ul className={classNames({ open })}>
                            {funcs.items.map(item => {
                                return (
                                    <li className={classNames({ active: item.key === selectedkey })} onClick={() => this.onChange(item.key)}>
                                        <div>{item.name}</div>
                                        <p>{item.desc}</p>
                                    </li>
                                )
                            })}
                        </ul>]
                    })}
                </div>
            </div>
        )
    }
    toggleOpen = (key) => {
        const { openKeys } = this.state;
        if (openKeys.indexOf(key) > -1) {
            this.setState({
                openKeys: openKeys.filter(d => d !== key)
            })
        } else {
            this.setState({
                openKeys: [...openKeys, key]
            })
        }
    }
    onChange = (key) => {
        const selectedkey = this.state.selectedkey;
        this.setState({
            selectedkey: key === selectedkey ? 'nothing' : key
        });
        const { onChange } = this.props;
        if (onChange) {
            onChange(key === selectedkey ? 'nothing' : key);
        }
    }
}